<template>
	<view v-if="isPhoneBox" :style="viewColor">
		<view class="mobile-bg" @click="close"></view>
		<view class="mobile-mask animated" :class="{slideInUp:isUp}">
			<view class="info-box">
				<image :src="imgLogo"></image>
				<view class="title">{{`获取授权`}}</view>
				<view class="txt">{{`获取手机号授权`}}</view>
			</view>
			<button class="sub_btn" open-type="getPhoneNumber" @getphonenumber="getphonenumber">{{`授权手机号`}}</button>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	import Routine from '@/libs/routine';
	import {
		configMap
	} from '@/utils/index';
	import {
		loginMobile,
		getCodeApi,
		getUserInfo,
		loginMpPhone,
		editAvatar
	} from "@/api/user";
	import {
		getLogo,
		silenceAuth,
		getUserPhone
	} from '@/api/public';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	export default {
		name: 'routine_phone',
		props: {
			isPhoneBox: {
				type: Boolean,
				default: false,
			},
			logoUrl: {
				type: String,
				default: '',
			},
			authKey: {
				type: String,
				default: '',
			},
			viewColor: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				keyCode: '',
				account: '',
				codeNum: '',
				isStatus: false,
				imgLogo: HTTP_REQUEST_URL + '/static/logo2.png',
			}
		},
		computed: {
			...configMap(['routine_logo', 'login_logo'])
		},
		mounted() {},
		created() {
			// #ifdef MP
			this.imgLogo = this.routine_logo
			// #endif
			// #ifndef MP
			this.imgLogo = this.login_logo
			// #endif
		},
		methods: {
			// #ifdef MP
			// 小程序获取手机号码
			getphonenumber(e) {
				uni.showLoading({
					title: `正在登录中`
				});

				Routine.getCode()
					.then(code => {
						console.log(code, "cdoe")
						this.codeNum = code
						this.getPhoneNumbers(e)
						// this.getUserPhoneNumber(e.detail.encryptedData, e.detail.iv, code);
					})
					.catch(error => {
						uni.hideLoading();
					});
			},
			// 小程序获取手机号码回调
			getUserPhoneNumber(encryptedData, iv, code) {
				console.log(encryptedData, iv, "cdoe")

				// getUserPhone({
				// 		encryptedData: encryptedData,
				// 		iv: iv,
				// 		code: code,
				// 		spread_spid: app.globalData.spid,
				// 		spread_code: app.globalData.code,
				// 		key: this.authKey
				// 	})
				// 	.then(res => {
				// 		let time = res.data.expires_time - this.$Cache.time();
				// 		this.$store.commit('LOGIN', {
				// 			token: res.data.token,
				// 			time: time
				// 		});
				// 		this.getUserInfo();
				// 	})
				// 	.catch(res => {
				// 		uni.hideLoading();
				// 	});
			},
			// #ifdef MP
			getPhoneNumbers(e) {
				let that = this;
				loginMpPhone({
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData,
						code: that.codeNum,
						auth_token: uni.getStorageSync('auth_token'),
					}).then(({
						data
					}) => {
						console.log(data.user.phone, "data.user")
						that.$store.commit("LOGIN", {
							'token': data.token,
							'time': data.exp
						});
						// that.$store.commit("SETPHONE",data.user.phone)
						uni.setStorageSync("PHONE", data.user.phone)
						editAvatar({
							avatar: data.user.avatar
						})
						// data.user.nickname
						// data.user.phone
						that.$store.commit("SETUID", data.user.uid);
						that.$store.commit('UPDATE_USERINFO', data.user);
						uni.showToast({
							title: "授权成功",
							icon: "none"
						})
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/index/minp",
								fail() {
									uni.switchTab({
										url: "/pages/index/minp"
									})
								}
							})

						}, 1000)
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			// #endif
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					console.log(res.data, "data")
					uni.hideLoading();
					that.userInfo = res.data
					that.$store.commit("SETUID", res.data.uid);
					// that.$store.commit("SETPHONE",res.data.user)
					that.$store.commit("UPDATE_USERINFO", res.data);
					that.isStatus = true
					this.close()
				});
			},
			// #endif
			close() {
				this.$emit('close', {
					isStatus: this.isStatus
				})
			}
		}
	}
</script>

<style lang="scss">
	.mobile-bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	.mobile-mask {
		z-index: 20;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 67rpx 30rpx;
		background: #fff;

		.info-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}

			.title {
				margin-top: 30rpx;
				margin-bottom: 20rpx;
				font-size: 36rpx;
			}

			.txt {
				font-size: 30rpx;
				color: #868686;
			}
		}

		.sub_btn {
			width: 690rpx;
			height: 86rpx;
			line-height: 86rpx;
			margin-top: 60rpx;
			background-color: var(--view-theme);
			border-radius: 43rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
		}
	}

	.animated {
		animation-duration: .4s
	}
</style>